<!DOCTYPE html>
<html lang="en">
<head>
<title>T7 - Div T3</title>
<style>
h1 {
text-align: center;
font-size: 45px;
}
#outer {
height: 1000px;
width: 1000px;
border: 1px solid;
margin: 0 auto;
}
#row1 {
height: 150px;
width: 1000px;
}
#r1_col1 {
float: left;
height: 150px;
width: 150px;
background-color: #015B7E;
}
#r1_col2 {
float: left;
height: 150px;
width: 350px;
background-color: #0077A2;
}
#r1_col3 {
float: left;
height: 150px;
width: 350px;
background-color: #6DCFF6;
}
#r1_col4 {
float: left;
height: 150px;
width: 150px;
background-color: #015B7E;
}
#row2 {
height: 350px;
width: 1000px;
}
#r2_col1 {
float: left;
height: 350px;
width: 150px;
background-color: #6DCFF6;
}
#r2_col2 {
float: left;
height: 350px;
width: 700px;
background-color: lightgray;
}
#r2_col3 {
float: left;
height: 350px;
width: 150px;
background-color: #6DCFF6;
}
#row3 {
height: 350px;
width: 1000px;
}
#r3_col1 {
float: left;
height: 350px;
width: 150px;
background-color: #0077A2;
}
#r3_col2 {
float: left;
height: 350px;
width: 700px;
background-color: lightgray;
}
#r3_col3 {
float: left;
height: 350px;
width: 150px;
background-color: #0077A2;
}
#row4 {
height: 150px;
width: 1000px;
}
#r4_col1 {
float: left;
height: 150px;
width: 150px;
background-color: #015B7E;
}
#r4_col2 {
float: left;
height: 150px;
width: 350px;
background-color: #0077A2;
}
#r4_col3 {
float: left;
height: 150px;
width: 350px;
background-color: #6DCFF6;
}
#r4_col4 {
float: left;
height: 150px;
width: 150px;
background-color: #015B7E;
}
</style>
</head>
<body>
<h1>Task - 7 | Div Task - 3</h1>
<div id="outer">
<div id="row1">
<div id="r1_col1"></div>
<div id="r1_col2"></div>
<div id="r1_col3"></div>
<div id="r1_col4"></div>
</div>
<div id="row2">
<div id="r2_col1"></div>
<div id="r2_col2"></div>
<div id="r2_col3"></div>
</div>
<div id="row3">
<div id="r3_col1"></div>
<div id="r3_col2"></div>
<div id="r3_col3"></div>
</div>
<div id="row4">
<div id="r4_col1"></div>
<div id="r4_col2"></div>
<div id="r4_col3"></div>
<div id="r4_col4"></div>
</div>
</div>
</body>
</html>